<style lang="scss">
	.list-item {
		display: flex;

		.image {
			width: 200rpx;
			height: 200rpx;
		}

		.con {
			flex: 1;
		}
	}
</style>
<template>
	<view>
		<view class="list-item" v-for="(item,index) in cartList" :key="item.id">
			<checkbox :checked="item.state" @click="item.state = !item.state"/>
			<image class="image" :src="item.image" mode=""></image>
			<view class="con">
				<view class="title">{{item.title}}</view>
				<view class="desc">{{item.price}}</view>
				<uni-number-box v-model="item.count"></uni-number-box>
			</view>	
		</view>

		<view>
			<label>
				<checkbox :checked="allState" @click="changeAllState"/><text></text>
			</label>
			<text>总价： {{ allPrice }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	const cartList = ref(uni.getStorageSync('cartList') || []);
	const allState = computed(() => {
		return cartList.value.every(v => v.state)
	})
	const changeAllState = () => {
		const state = !allState.value
		cartList.value.forEach(v => {
			v.state = state
		})
	}
	const allPrice = computed(() => {
		let p = 0;
		cartList.value.forEach(v => {
			if (v.state)
			p += v.price * v.count
		})

		return p
	})
</script>